import { type } from '@testing-library/user-event/dist/type'
import React, { Component } from 'react'

import FilterFooter from '../../../../components/FilterFooter'

import styles from './index.module.css'

export default class FilterMore extends Component {
  state={
    selectvalues:this.props.selectedValues
  }

    //设置点击事件，点一次放入selectvalues数组，点两次从selectvalues数组取消
  onTagClick(value){
    const { selectvalues}=this.state
    const newselectvalues=[...selectvalues]
    if(newselectvalues.indexOf(value)<=-1){
      newselectvalues.push(value)
    }else{
      const reindex=newselectvalues.findIndex(item=> item===value )
      newselectvalues.splice(reindex,1)//从数组中删除该值
    }
    this.setState(
      {selectvalues:newselectvalues}
    )
  }


  // 渲染标签
  renderFilters(data) {
    const {selectvalues}=this.state
    return data.map(item=>{
      const isselect=selectvalues.indexOf(item.value)>-1
      return <span key={item.value} className={[styles.tag,isselect?styles.tagActive:" "].join(' ')}  onClick={()=>this.onTagClick(item.value)} >{item.label}</span>
  })
  }

  //取消按钮
  onCancel=()=>{
    this.setState({
      selectvalues:[]
    })
  }

  //确定按钮
  onOk=()=>{
    const {type,onSave}=this.props//获取
    onSave(type,this.state.selectvalues)//调用，输入参数，当前类型+当前选择值
  }

  render() {
    const {roomType,oriented,floor,characteristic}=this.props.data
    const {type}=this.props
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <div className={styles.mask} onClick={()=>this.props.onCancel(type)}/>

        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮 */}
        <FilterFooter className={styles.footer}  cancelText="清除" onCancel={this.onCancel} onOk={this.onOk} />
      </div>
    )
  }
}
